高阶组件

export default function withDemo(WrappedComponent){
    return class Demo extends React.Component {
        static displayName = 'with' + WrappedComponent.name
        ... 定义公共的状态和逻辑
        render(){
            return <WrappedComponent {...this.state} {...this.props} ></WrappedComponent>
        }
    }
}

const WithLogin = withDemo(Login)



renderprops
class Demo extends React.Component {
   
    ... 定义公共的状态和逻辑
    render(){
        return this.props.render(state)
        // return this.props.children(state)
    }
}

<Demo render={(state)=>{return <子组件 {...state}></子组件>}}></Demo>
<Demo>{(state)=>{return <子组件 {...state}></子组件>}}</Demo>


HOOK 

useState  模拟类组件中的状态

 const [状态值, 修改状态的方法] = useState(初始值)

 const [count, setCount] = useState(0)
 const [msg, setMsg] = useState('')

 setCount(count + 1) 或  setCount((newCount)=>{return newCount + 1})

useEffect 模拟类组件中的生命周期钩子函数. 只模拟挂载,更新和卸载

 useEffect(()=>{
     return ()=>{

     }
 }, 数组)

 1. 不写数组,外层模拟挂载和更新, 内部模拟卸载
 2. 写了空数组, 外层模拟挂载,内部模拟卸载
 3. 数组中监听了某些数据,当监听的数据发生变化时,外层模拟更新, 否则外层不模拟更新

 hook的使用规则: 
 1. 只能在函数组件中,其他hook中使用,不能再类组件或普通函数中使用
 2. 使用时,只能在顶级作用域

 自定义hook

 自定义hook就是自定义函数. 函数名必须是以useXxx格式命名





